<template>
  <div class="todo-container">
    <!-- 顶部粉色导航：标题+输入框+添加按钮 -->
    <header class="header">
      <h1>魔芋爽的待办清单</h1>
      <div class="input-group">
        <input 
          v-model="todoname" 
          @keyup.enter="addTask" 
          placeholder="请输入任务" 
          class="task-input"
          autofocus
        >
        <button @click="addTask" class="add-btn">添加任务</button>
      </div>
    </header>

    <!-- 任务列表（带序号+删除按钮） -->
    <section class="task-list">
      <ul>
        <li 
          v-for="(item, index) in taskList" 
          :key="item.id"
          class="task-item"
        >
          <span class="item-index">{{ index + 1 }}.</span> 
          <span class="item-text">{{ item.name }}</span>
          <!-- 🔥 新增删除按钮：hover显示，点击触发删除 -->
          <button @click="delTask(item.id)" class="del-btn">×</button>
        </li>
      </ul>
    </section>

    <!-- 底部统计+清空按钮 -->
    <footer class="footer">
      <span class="total">合计：{{ taskList.length }}</span>
      <button @click="clearAll" class="clear-btn">清空任务</button>
    </footer>
  </div>  
</template>

<script setup>
import { ref, onMounted } from 'vue' // 导入组合式 API 核心函数

// 1. 定义响应式状态（替代选项式 API 的 `data`）
const todoname = ref('')   // 输入框内容（双向绑定）
const taskList = ref([])  // 任务列表（持久化到 localStorage）


onMounted(() => {
  const storedList = localStorage.getItem('todoList')
  if (storedList) {
    taskList.value = JSON.parse(storedList) // ref 需通过 .value 操作
  }
})


// 🔹 添加任务
const addTask = () => {
  if (todoname.value.trim() === '') { // 访问 ref 需 .value
    alert('请输入任务名称')
    return
  }
  taskList.value.unshift({ // 往任务列表头部新增
    id: Date.now(),        // 时间戳生成唯一 ID
    name: todoname.value
  })
  todoname.value = ''      // 清空输入框
  localStorage.setItem('todoList', JSON.stringify(taskList.value)) // 同步到本地存储
}

// 🔹 删除任务
const delTask = (id) => {
  taskList.value = taskList.value.filter(item => item.id !== id) // 过滤掉目标任务
  localStorage.setItem('todoList', JSON.stringify(taskList.value)) // 同步到本地存储
}

// 🔹 清空任务
const clearAll = () => {
  if (confirm('确定要清空所有任务吗？')) {
    taskList.value = []                     // 清空任务列表
    localStorage.removeItem('todoList')     // 清除本地存储的任务
  }
}
</script>

<style scoped>
/* 原样式保持不变（与截图像素级匹配） */
.todo-container {
  max-width: 600px;
  margin: 40px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}
.header {
  background: #ff6b81; /* 顶部大粉色背景 */
  padding: 20px;
  text-align: center;
}
.header h1 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 16px;
}
.input-group {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.task-input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}
.add-btn {
  padding: 0 24px;
  background: #ff4757;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}
.add-btn:hover {
  background: #ff0000;
}
.task-list {
  padding: 20px;
}
.task-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让文字和删除按钮分列两侧 */
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  transition: background 0.3s;
}
.task-item:hover {
  background: #f9f9f9;
}
.item-index {
  margin-right: 8px;
  color: #666;
}
.item-text {
  flex: 1;
  word-break: break-word;
}
.del-btn {
  background: none;
  border: none;
  color: #ff4757;
  font-size: 30px;
  cursor: pointer;
  opacity: 0; /* 默认隐藏删除按钮 */
  transition: opacity 0.3s;
}
.task-item:hover .del-btn {
  opacity: 1; /* 悬浮任务项时显示删除按钮 */
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f9f9f9;
  border-top: 1px solid #eee;
}
.total {
  font-size: 16px;
  font-weight: bold;
}
.clear-btn {
  padding: 6px 16px;
  background: #ff6b81;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}
.clear-btn:hover {
  background: #ff4757;
}
/* 响应式：手机端输入框占满宽度 */
@media (max-width: 480px) {
  .input-group {
    flex-direction: column;
  }
  .task-input, .add-btn {
    width: 100%;
  }
}
</style>